import React, { useMemo, useState } from 'react';
import { Space,Select, Table, Tag,Popconfirm,Button,Modal } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import dayjs from 'dayjs'
import * as asyncfn from '../../store/crmslice'
import Myfrom from './myfrom';
  const Shoplist = (props) => {
    let dispatch=useDispatch()
    let obj=useSelector(state=>state.todos)
    //筛选
    let newData=useMemo(()=>{
      return obj.shoplist.filter(item=>{
        return item.zhuangtai
      })
    },[obj.shoplist])
    
    //添加气泡框
    const [isModalOpen, setIsModalOpen] = useState(false);
    //控制标题
    const [titlee, settitlee] = useState("添加");
    //控制回显
    const [itemobj, setitemobj] = useState({});
    const showModal = () => {
      setIsModalOpen(true);
    };
    const handleCancel = () => {
      setIsModalOpen(false);
    };
     const columns = [
  {
    title: '优惠券名称',
    dataIndex: 'title',
  },
  {
    title: '优惠券面值',
    dataIndex: 'mianzhi',
  },
  {
    title: '优惠券最低消费',
    dataIndex: 'xiaofei',
  },
  {
    title: '优惠券有效期限',
    dataIndex: 'qixian',
  },
  {
    title: '排序',
    dataIndex: 'paixu',
  },
  {
    title: '状态',
    dataIndex: 'zhuangtai',
    render:(zhuangtai)=>{
      return <Tag color={zhuangtai?"blue":"red"}>{zhuangtai?"开启":"关闭"}</Tag>
    }
  },
  {
    title: '创建时间',
    dataIndex: 'shijian',
    render:(shijian)=>{
      return dayjs(shijian).format("YYYY/MM/DD hh:mm:ss")
    }
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <Button onClick={()=>{
          props.history.push('/admin/typelist')
        }}>发布</Button>
        <Select
          defaultValue="操作"
          style={{ width: 80 }}
          onChange={(value)=>{
            if(value=="编辑"){
               showModal()
              settitlee("编辑")
              setitemobj(record)
            }else{
              alert("你确定删除吗？")
              dispatch(asyncfn.async_delshoplist(record.id))
            }
          }}
          options={[
            { value: '编辑', label: '编辑' },
            { value: '删除', label: '删除' },
          ]}
        />
      </Space>
    ),
  },
];
  return <>
  <Button type="primary" onClick={()=>{
    showModal()
    settitlee("添加")
    setitemobj({})
  }}>
        新增
      </Button>
      <Modal
        footer={null}
        title={titlee}
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onCancel={handleCancel}
      >
        <Myfrom itemobj={itemobj} titlee={titlee} key={new Date().getTime()} onCancel={handleCancel}/>
      </Modal>
      <Table columns={columns} dataSource={newData} rowKey={"id"}/>
  </>
}
export default Shoplist;